<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>金龙鱼</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="css/swiper.3.4.2.min.css">

  <style>
    /*全局的公共设置*/
    html{min-height: 100%;font-size: 185%;}
    @media only screen and (max-width: 341px){
      html {font-size: 185%!important;}
    }
    @media only screen and (min-width: 340px) and (max-width:385px){
      html {font-size: 200%!important;}
    }
    @media only screen and (min-width: 481px) and (max-width:800px){
      html {font-size: 350%!important;}
    }
    @media only screen and (min-width: 801px){
      html {font-size: 500%!important;}
    }    
    * {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
    *:before,*:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
    body{font-family: "Helvetica,STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Arial";background-color: #f3f3f3;color: #666;}
    .container{min-width: 320px;max-width: 1024px;margin: 0 auto;padding-bottom: 6rem;}
    .container img{max-width: 100%;-webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;-webkit-user-select: none; }
    .containerNobtn{padding-bottom: 0px;}
    .containerMtp44{margin-top: 44px;}
    .containerMtp54{margin-top: 54px;}
    a{text-decoration: none;color: #333; -webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;-webkit-user-select: none;cursor: pointer;-webkit-transition:all ease-in .3s;}
    a:active,a:visited{color: #333;text-decoration: none;}
    /*button按钮元素特殊样式去除*/
    button::-moz-focus-inner,
    button[type="button"]::-moz-focus-inner,
    button[type="submit"]::-moz-focus-inner,
    input[type="reset"]::-moz-focus-inner,
    input[type="button"]::-moz-focus-inner,
    input[type="submit"]::-moz-focus-inner,
    input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 1px dotted transparent;
    padding: 0 2px;
    }  
    input{-webkit-touch-callout: none;-webkit-tap-highlight-color:transparent;}
    img {
        border-style: none;
    }

    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }

    .header {
      position:fixed;
      top: 0px;
      width: 100%;
      z-index:999;
    }
    .content {
      margin-top: 1.8rem;
      z-index:0;
    }
    .hidden {
      display: none;
    }
    .swiper-container {
        width: 100%;
        height: .7rem;
        background-color: #FFFFFF;
        margin: auto;
    }
    .swiper-slide {
        text-align: center;
        font-size: .3rem;
        background: #fff;
        
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .swiper-slide a {
      width: 100%;
    }
    .focus a {font-size: .5rem; color: red;}

    .title-bar-box {width: 100%;}
    .title-bar-box .title-bar {
        width: 100%;
        height: 1.1rem;
        background-color: #a71e25;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .title-bar-box .title-bar img {
        width: 3.34rem;
        margin-left: .3rem;
    }

    .head-slide-container {
        overflow: hidden;
    }
    .head-slide a img {
        width: 100%;
        display: block;
    }    
    .head-slide a span {
        font-size: .52rem;
        width: 13.3rem;
        height: 1rem;
        line-height: 1rem;
        text-align: left;
        color: #fff;
        font-family: "\5fae\8f6f\96c5\9ed1";
        display: inline-block;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 10;
        padding: 0 .3rem;
        background: -webkit-linear-gradient(top,rgba(0,0,0,0) 8%,rgba(0,0,0,0.24) 40%,rgba(0,0,0,0.29) 47%,rgba(0,0,0,0.65) 95%);
        background: linear-gradient(to bottom,rgba(0,0,0,0) 8%,rgba(0,0,0,0.24) 40%,rgba(0,0,0,0.29) 47%,rgba(0,0,0,0.65) 95%);
    }

    .news-list {
        width: 100%;
        position: relative;
    }
    .news-list-item {
        width: 100%;
        position: relative;
        display: flex;
        background: #f6f4f5;
        flex-direction: row;
        align-items: center;
        border-bottom: 0.2px solid #e6e6e6;
    }
    .news-list-item .left {
        width: 3rem;
        height: 2.25rem;        
        height: 100%;
    }
    .news-list-item .left img {
        width: 3rem;
        height: 2.25rem;        
        height: 100%;
    }    
    .news-list-item .right {
        flex: 1;
        padding: 0rem .3rem;
    }
    .news-list-item .right .right-top {
        font-size: .5rem;
        color: #46798e;
        height: 1.1rem;
        margin-top: 0.2rem;
    }
    .news-list-item .right .right-top p {
        margin: 0 ;
    }
    .news-list-item .right .right-center {    
        font-size: .3rem;
        color: #5b5b5b;
        margin: .05rem 0;
        overflow: hidden;
    }
    .news-list-item .right .right-center p {
        margin: 0;
    }  
    .news-list-item .right .right-bottom {
        display:-webkit-box;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;
        flex-direction: row;
        align-items: center;
    }
    .flex-pack-justify{
        -webkit-box-pack:justify;
        -webkit-justify-content:
        space-between;
        -ms-flex-pack:justify;
        justify-content:space-between;
    }
    .news-list-item .news-channel {
        font-size: .22rem;
        color: #bdbdbd;
        margin: 0.12rem;
    }
    .news-list-item .news-time {
        font-size: .22rem;
        color: #bdbdbd;
        padding-top: .03rem;
        float:right
    }
    .imgset-item{
        height: 5.4rem;
    }    
    .news-list-item .imgset{
        height: auto;
        width: 100%;
        font-size: 0;
    }
    .news-list-item .imgset .news-title {
        font-size: .54rem;
        color: #46798e;
        padding: 0 0 .2rem .2rem;
        height: auto;
    }
    .news-list-item .imgset .imgset-wrap{
        margin-top: 0;
        position: relative;
        width: auto;
        overflow: hidden;
    }
    .news-list-item .imgset img {
        float: left;
        width: 33%;
    }
    .blank {
        width: 0.5%!important;
    }
    .news-list-item .imgset .imgset-bottom {
        display:-webkit-box;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;
        flex-direction: row;
        align-items: center;
        height: .6rem;
    }
    .bignews-item{
        height: 8.2rem;
    }   
    .news-list-item .big-img-news .news-title {
        font-size: .54rem;
        color: #46798e;
        padding: 0 0 .2rem .2rem;
        height: auto;
    }
    .big-img-news img {
        display: block;
        width: 100%;
        overflow: hidden;

    }
    .news-list-item .big-img-news .big-news-bottom {
        display:-webkit-box;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;
        flex-direction: row;
        align-items: center;
        height: .6rem;
    }    
    .clearboth {
        clear:both;
        display: none;
    }

    /* iScroller Style*/
    #wrapper {
      z-index: 1;
      top: 8rem;
      bottom: 1px;
      left: 0;
      width: 100%;
      background: #ccc;
      overflow: hidden;
    }
    #scroller {
      position: absolute;
      z-index: 1;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      width: 100%;
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-text-size-adjust: none;
      -moz-text-size-adjust: none;
      -ms-text-size-adjust: none;
      -o-text-size-adjust: none;
      text-size-adjust: none;
    }
    #scroller .news-list {
      list-style: none;
      padding: 0;
      margin: 0;
      width: 100%;
      text-align: left;
    }
    /**
     *
     * Pull up styles
     *
     */
    #pullUp {
      background: white;
      height:45px;
      line-height:40px;
      padding:5px 10px;
      border-bottom:1px solid #ccc;
      font-weight:bold;
      font-size:14px;
      color:#888;
      position: absolute;
      width: 100%;
    }

    #pullUp {
      left: 0;
      bottom: -45px;
    }

    #pullUp .pullUpIcon  {
      display:block; float:left;
      width:40px; height:40px;
      background:url(img/pull-icon.png) 0 0 no-repeat;
      -webkit-background-size:40px 80px; background-size:40px 80px;
      -webkit-transition-property:-webkit-transform;
      -webkit-transition-duration:250ms;  
    }
    #pullUp .pullUpIcon  {
      -webkit-transform:rotate(-180deg) translateZ(0);
    }

    #pullUp.flip .pullUpIcon {
      -webkit-transform:rotate(0deg) translateZ(0);
    }

    #pullUp.loading .pullUpIcon {
      background-position:0 100%;
      -webkit-transform:rotate(0deg) translateZ(0);
      -webkit-transition-duration:0ms;

      -webkit-animation-name:loading;
      -webkit-animation-duration:2s;
      -webkit-animation-iteration-count:infinite;
      -webkit-animation-timing-function:linear;
    }

    @-webkit-keyframes loading {
      from { -webkit-transform:rotate(0deg) translateZ(0); }
      to { -webkit-transform:rotate(360deg) translateZ(0); }
    }
  </style>
</head>
<body>
  <header class="header">
    <div class="title-bar-box">
        <div class="title-bar">
            <img src="img/jinlongyu.gif" />
        </div>
    </div>
    <nav>
        <!-- Swiper -->
        <div class="swiper-container" id="navbar">
            <div class="swiper-wrapper">
                <div class="swiper-slide focus"><a href='#' alt="toutiao">头条</a></div>
                <div class="swiper-slide"><a href='#' alt="video">视频</a></div>
                <div class="swiper-slide"><a href='#' alt="entertianment">娱乐</a></div>
                <div class="swiper-slide"><a href='#' alt="sports">体育</a></div>
                <div class="swiper-slide"><a href='#' alt="finance">财经</a></div>
                <div class="swiper-slide"><a href='#' alt="car">汽车</a></div>
                <div class="swiper-slide"><a href='#' alt="beijing">北京</a></div>
                <div class="swiper-slide"><a href='#' alt="social">社会</a></div>
                <div class="swiper-slide"><a href='#' alt="milatry">军事</a></div>
                <div class="swiper-slide"><a href='#' alt="vouge">时尚</a></div>
                <div class="swiper-slide"><a href='#' alt="live">直播</a></div>
                <div class="swiper-slide"><a href='#' alt="photo">图片</a></div>
            </div>
        </div>         
    </nav>            
  </header>

  <section id="toutiao" class="content">
    <div id="wrapper">
      <div class="head-slide-container">
          <div class="swiper-wrapper">       
          </div>
      </div>  
        <div id="scroller">
          <div class="news-list" id="newslist">
                                     
          </div>
          <div id="pullUp">
            <span class="pullUpIcon"></span><span class="pullUpLabel" data-defaultText="上拉加载更多..." data-flipText="释放以加载..." data-loadingText="正在加载...">上拉加载更多...</span>
          </div>
        </div>
    </div>  
  </section>

  <section id="video" class="content hidden">
    <h1>视频</h1>
  </section>

  <section id="entertianment" class="content hidden">
    <h1>娱乐</h1>
  </section>

  <section id="sports" class="content hidden">
    <h1>体育</h1>
  </section>

  <section id="finance" class="content hidden">
    <h1>财经</h1>
  </section>

  <section id="car" class="content hidden">
    <h1>汽车</h1>
  </section>

  <section id="beijing" class="content hidden">
    <h1>北京</h1>
  </section>

  <section id="social" class="content hidden">
    <h1>社会</h1>
  </section>

  <section id="milatry" class="content hidden">
    <h1>军事</h1>
  </section>

  <section id="vouge" class="content hidden">
    <h1>时尚</h1>
  </section>

  <section id="live" class="content hidden">
    <h1>直播</h1>
  </section>

  <section id="photo" class="content hidden">
    <h1>图片</h1>
  </section>                      

  <!--[if lt IE 9]>
　　　　<script src="js/css3-mediaqueries.js"></script>
　<![endif]-->

  <!-- Jquery JS -->
  <script src="js/jquery-2.1.4.js"></script>
  <!-- Swiper JS -->
  <script src="js/swiper.min.js"></script>
  <!-- iScroll JS-->
  <script src="js/iscroll-probe.js"></script>
  <script src="js/iscroll.pullToRefresh.js"></script>
  <!-- Baidu Template JS-->
  <script src="js/baidutemplate.js"></script>  

  <!-- slider 前端模板部分 -->
  <script type="text/template"  id="slider">
    <%
      for(var i = 0; i<list.length;i++){
        var item = list[i];
    %>
    <div class="swiper-slide head-slide">
        <a href="<%=item.url%>">
            <img src="<%=item.sourceurl%>" />
            <span><%=item.title%></span>
        </a>
    </div>
    <% } %>
  </script>
  <!-- newslist 前端模板部分 -->
  <script type="text/template"  id="newsitem">
    <%
      for(var i = 0; i<list.length;i++){
        var item = list[i];
    %>
        <div class="news-list-item <% if (item.type==2){ %>bignews-item<%} else if(item.type==3){%>imgset-item<%} %>">
        <% if (item.type==0 || item.type==1){ %>
            <div class="left" <%if (item.type==0){%> style="display:none"<%}%>>
                <img src="<%=item.sourceurl%>" />
            </div>
            <div class="right">
                <div class="right-top">
                    <p><%=item.title%></p>
                </div>
                <% if (item.type==0){ %>
                <div class="right-center" id="summary<%=summarycount.toString()%><%=i.toString()%>">

                </div>
                <% 
                  updateSummary("summary"+ summarycount.toString() + i.toString(), item.summary);
                } %>                   
                <div class="right-bottom flex-pack-justify">
                    <p class="news-channel"><%=item.channel%></p>
                    <p class="news-time"><%=item.pubdate%></p>
                </div>
            </div>
        <%} else if (item.type==2){ %>
        <div class="big-img-news">
            <span class="news-title"><%=item.title%></span>
            <img src="<%=item.sourceurl%>" />
            <div class="big-news-bottom flex-pack-justify">
                <p class="news-channel"><%=item.channel%></p>
                <p class="news-time"><%=item.pubdate%></p>
            </div>                
        </div>
        <%} else if (item.type==3){ %>
            <div class="imgset">
                <span class="news-title"><%=item.title%></span>
                <div class="imgset-wrap">
                    <img src="<%=item.sourceurl[0]%>" />
                    <img src="img/blank.gif" class="blank"/>
                    <img src="<%=item.sourceurl[1]%>" />
                    <img src="img/blank.gif" class="blank"/>
                    <img src="<%=item.sourceurl[2]%>" />
                </div>
                <div class="imgset-bottom flex-pack-justify">
                    <p class="news-channel"><%=item.channel%></p>
                    <p class="news-time"><%=item.pubdate%></p>
                </div>                
            </div> 
        <% } %>       
    </div>
    <% } %> 
  </script>

  <script>
    var myScroll;
    var summarycount = 1;

    function updateSummary (id, content) {
      setTimeout("document.querySelector('#" + id + "').innerHTML = '" + content + "';", 1000);
    }

    $(document).ready(function () {
      //window.onerror=function(){return true;}

      var navswiper = new Swiper('.swiper-container', {
          pagination: '.swiper-pagination',
          slidesPerView: 7,
          paginationClickable: true,
          spaceBetween: 0,
          freeMode: true,
          slideToClickedSlide:true,
          onClick: function(swiper){
            var index = swiper.clickedIndex;
            $("#navbar").find(".swiper-slide").removeClass("focus");
            $($("#navbar").find(".swiper-slide")[index]).addClass("focus");
            $($("section").addClass("hidden")[index]).removeClass("hidden");
          }          
      });


      // News List Scroller
      function loaded () {
        myScroll = new MyScroll('#wrapper', {
          pullUpEl: "#pullUp",
          pullUpAction: requestNewData 
        });
      }

      function requestNewData() {
        $.ajax('http://18.220.24.81/jinlongyu/datasrc.php?act=more', {
          success: function (data) {
            var tpldata= {};
            tpldata.title = "newslist_template";
            tpldata.summarycount = summarycount++;
            tpldata.list = data;
            var tplfunc = baidu.template("newsitem");
            var htmlstr = tplfunc(tpldata);

            $(".news-list").append(htmlstr);
            setTimeout(myScroll.refresh(), 0);
          }
        });    
      }

      $.ajax('http://18.220.24.81/jinlongyu/datasrc.php?act=slide', {
        success: function (data) {
          var tpldata= {};
          tpldata.title = "slider_template";
          tpldata.summarycount = summarycount++;
          tpldata.list = data;
          var tplfunc = baidu.template("slider");
          var htmlstr = tplfunc(tpldata);
          $(".head-slide-container .swiper-wrapper").html(htmlstr);

          var headswiper = new Swiper('.head-slide-container');
        }
      });
     
      $.ajax('http://18.220.24.81/jinlongyu/datasrc.php?act=newslist', {
        success: function (data) {
          var tpldata= {};
          tpldata.title = "newslist_tempalte";
          tpldata.summarycount = summarycount++;
          tpldata.list = data;
          var tplfunc = baidu.template("newsitem");
          var htmlstr = tplfunc(tpldata);
          $(".news-list").html(htmlstr);

          setTimeout(loaded(), 5000);
        }
      });

      /*myScroll = new IScroll('#toutiao', {
          mouseWheel: true,
          infiniteElements: '#toutiao .news-list-item',
          //infiniteLimit: 2000,
          dataset: requestData,
          dataFiller: updateContent,
          cacheSize: 1000
      });*/
    });     

  </script>
</body>
</html>